<script lang="ts" setup>
import { ref, onMounted, defineExpose } from "vue";
import { Codemirror } from "vue-codemirror";
import { sql } from "@codemirror/lang-sql";
import { message } from "@/utils/message";
import { saveTableJson, getFormById } from "@/api/metaTable";
//import { oneDark } from "@codemirror/theme-one-dark";
const code = ref();
//const extensions = [sql(), oneDark];
const extensions = [sql()];
import { FormProps } from "../utils/types";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    higherDeptOptions: [],
    tableType: 1,
    classID: 0,
    tableName: "",
    tableJson: "",
    status: 1,
    addUser: 0,
    title: "",
    tableIsFaBu: 0,
    addTime: "2022-03-15"
  })
});
const oneRowData = ref(props.formInline);

onMounted(async () => {
  const Result = await getFormById({ id: oneRowData.value.id });
  if (Result.isSuccess) {
    if (Result.result.tableJson != "") {
      code.value = Result.result.tableJson;
      //makingform.value.setJSON(JSON.parse(Result.result.tableJson));
    }
  } else {
    message(Result.msg, { type: "error" });
  }
});

const saveJson = async () => {
  //const Json = JSON.stringify(makingform.value.getJSON());
  const Result = await saveTableJson({
    id: oneRowData.value.id,
    tableJson: code.value
  });
  if (Result.isSuccess) {
    oneRowData.value.tableIsFaBu = 0;
    message("保存成功！", { type: "success" });
  } else {
    message(Result.msg, { type: "error" });
  }
};
/*
const handleClick = (type: string, val: Event) => {
  console.log(type, val);
};
*/
defineExpose({ saveJson });
</script>
<template>
  <div class="box">
    <Codemirror
      class="code"
      v-model="code"
      :style="{ height: '100%' }"
      :extensions="extensions"
      :autofocus="true"
      :disabled="false"
    />
    <!--@ready="handleClick('ready', $event)"
      @change="handleClick('change', $event)"
      @focus="handleClick('focus', $event)"
      @blur="handleClick('blur', $event)"-->
  </div>
</template>

<style>
.box {
  width: 100%;
  height: 300px;
  border: 1px solid rgb(185 182 182);
}

.code {
  width: 300px;
  height: 100%;
  font-size: 18px;
}
</style>
